<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo combine highcharts with Gio.js / Gio.js</title>

    <script src="js/jquery.min.js"></script>
    <script src="js/highcharts.min.js"></script>

    <script src="js/three.min.js"></script>
    <script src="../build/gio.min.js"></script>

    <link rel="stylesheet" href="css/common.css">

    <style>

        #importChartArea {

            position: fixed;
            left: 0;
            top: 0;
            height: 50%;
            width: 50%;
            background-color: #000000;
            border-right: 1px solid #9c9c9c;
            border-bottom: 1px solid #9c9c9c;
            box-sizing: border-box;

        }

        #exportChartArea {

            position: fixed;
            left: 0;
            top: 50%;
            height: 50%;
            width: 50%;
            background-color: #000000;
            border-right: 1px solid #9c9c9c;
            box-sizing: border-box;

        }

        #globeArea {

            position: fixed;
            left: 50%;
            top: 0;
            height: 100%;
            width: 50%;
            background-color: #000000;

        }

    </style>

</head>
<body>

<div id="importChartArea"></div>
<div id="exportChartArea"></div>

<div id="globeArea"></div>

<div class="view_source">
    <a href="https://github.com/syt123450/Gio.js/blob/master/examples/21_combine_highcharts.html">View Source</a>
</div>

<script>

    var lookupData = {

        "France": "FR",
        "United States": "US",
        "China": "CN",
        "Russia": "RU"

    };

    var importData = [

        {

            name: 'France',
            y: 1000000,
            sliced: false,
            selected: false

        }, {

            name: 'United States',
            y: 1100000,
            sliced: true,
            selected: true

        }, {

            name: 'China',
            y: 1000000,
            sliced: false,
            selected: false

        }, {

            name: 'Russia',
            y: 3000000,
            sliced: false,
            selected: false

        }

    ];

    var exportData = [

        {

            name: 'France',
            y: 1000000,
            sliced: false,
            selected: false

        }, {

            name: 'United States',
            y: 1000000,
            sliced: true,
            selected: true

        }, {

            name: 'China',
            y: 3100000,
            sliced: false,
            selected: false

        }, {

            name: 'Russia',
            y: 1000000,
            sliced: false,
            selected: false

        }

    ];

    var importChart = createImportChart();
    var exportChart = createExportChart();

    var container = document.getElementById( "globeArea" );
    var controller = new GIO.Controller( container );

    controller.onCountryPicked( onCountryClickedCallback );

    $.ajax( {

        url: "data/sampleData.json",
        type: "GET",
        contentType: "application/json; charset=utf-8",
        async: true,
        dataType: "json",
        success: function ( inputData ) {

            controller.addData( inputData );
            controller.init();

        }

    } );

    function createImportChart () {

        var chart = {

            plotBackgroundColor: "#000000",
            plotBorderWidth: 0,
            plotShadow: false,
            backgroundColor: "#000000"

        };

        var title = {

            text: 'Country Import Pie Chart',
            style: {

                color: '#ffffff'

            }

        };

        var tooltip = {

            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

        };

        var plotOptions = {

            pie: {

                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {

                    enabled: true,
                    format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                    style: {

                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'

                    }

                },
                events: {

                    click: function ( event ) {

                        switchClickedCountry( event.point.name );
                        updateExportChart( event.point.name );

                    }

                }

            }

        };

        var series = [ {

            type: 'pie',
            name: 'import percentage',
            slicedOffset: 20,
            data: importData

        } ];

        var credits = {

            enabled: false

        };

        var json = {};
        json.chart = chart;
        json.title = title;
        json.tooltip = tooltip;
        json.series = series;
        json.plotOptions = plotOptions;
        json.credits = credits;

        return Highcharts.chart( "importChartArea", json );

    }

    function createExportChart () {

        var chart = {

            plotBackgroundColor: "#000000",
            plotBorderWidth: 0,
            plotShadow: false,
            backgroundColor: "#000000"

        };

        var title = {

            text: 'Country Export Pie Chart',
            style: {

                color: '#ffffff'

            }

        };

        var tooltip = {

            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

        };

        var plotOptions = {

            pie: {

                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {

                    enabled: true,
                    format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                    style: {

                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'

                    }

                },
                events: {

                    click: function ( event ) {
                        switchClickedCountry( event.point.name );
                        updateImportChart( event.point.name );

                    }

                }

            }

        };

        var series = [ {

            type: 'pie',
            name: 'export percentage',
            slicedOffset: 20,
            data: exportData

        } ];

        var credits = {

            enabled: false

        };

        var json = {};
        json.chart = chart;
        json.title = title;
        json.tooltip = tooltip;
        json.series = series;
        json.plotOptions = plotOptions;
        json.credits = credits;

        return Highcharts.chart( "exportChartArea", json );

    }

    function switchClickedCountry ( countryName ) {

        var abbr = lookupData[ countryName ];
        controller.switchCountry( abbr );

    }

    function onCountryClickedCallback( clickedCountry ) {

        for ( var countryName in lookupData ) {

            if ( lookupData[ countryName ] === clickedCountry.ISOCode ) {

                updateImportChart( countryName );
                updateExportChart( countryName );

                return;

            }

        }

        updateImportChart();
        updateExportChart();

    }

    function updateImportChart( countryName ) {

        for ( var i in importData ) {

            var data = importData[ i ];
            if ( data.name === countryName ) {

                data.sliced = true;
                data.selected = true;

            } else {

                data.sliced = false;
                data.selected = false;

            }

        }

        importChart.series[ 0 ].setData( JSON.parse( JSON.stringify( importData ) ) );

    }

    function updateExportChart( countryName ) {

        for ( var i in exportData ) {

            var data = exportData[ i ];
            if ( data.name === countryName ) {

                data.sliced = true;
                data.selected = true;

            } else {

                data.sliced = false;
                data.selected = false;

            }

        }

        exportChart.series[ 0 ].setData( JSON.parse( JSON.stringify( exportData ) ) );

    }

</script>

</body>
</html>